<template>
  <section class="h100 pt15 tabs-fixed">
    <van-tabs v-model="activeName" sticky animated swipeable @change="onChange">
      <van-tab
          :title="item.title"
          :name="item.name"
          v-for="(item, index) in tabs"
          :key="index"
      >
        <van-row
            class="gift-panel"
            v-for="(typeValue, typeIndex) in giftListData"
            :key="typeIndex"
        >
          <van-row class="title">{{ typeValue["typeName"] }}</van-row>
          <van-row class="list">
            <van-row
                class="item"
                v-for="(giftValue, giftIndex) in typeValue.giftList"
                :key="giftIndex"
            >
              <van-row class="content">
                <p class="name">{{ giftValue["name"] }}</p>
                <p class="tips">{{ giftValue["content"] }}</p>
                <p class="num">{{ giftValue["des"] }}</p>
              </van-row>
              <van-row class="btns">
                <div
                    class="option"
                    v-if="!giftValue['cardNum']"
                    @click="getCard(giftValue['giftId'])"
                >
                  领取
                </div>
                <div
                    class="option style-1"
                    v-if="giftValue['cardNum']"
                    @click="copyCard(giftValue['cardNum'])"
                >
                  复制
                </div>
              </van-row>
            </van-row>
          </van-row>
        </van-row>
      </van-tab>
    </van-tabs>
  </section>
</template>

<script>
import {BRStorage} from "../../../utils/brStorage";
import {BRNative} from "../../../utils/brNative";

export default {
  data() {
    return {
      activeName: "/gift/list",
      tabs: [
        {
          title: "礼包",
          name: "/gift/list",
        },
        {
          title: "优惠券",
          name: "/coupon/list",
        },
        // {
        //   title: "活动",
        //   name: "/activities/list",
        // },
      ],
      gameIcon: "",
      giftListData: [],
    };
  },
  created() {
    this.getLoad();
  },
  methods: {
    //初始化加载
    getLoad() {
      let queryData = this.$route.query;
      let userToken = queryData.userToken;
      let fromNative = queryData.native;
      let gameId = queryData.gameId;
      let channelCode = queryData.channelCode;
      let runRomSystem = queryData.runRomSystem;
      this.sdkVersionCode = this.$route.query.sdkVersionCode;
      if (this.BRIsSetString(fromNative)) {
        BRStorage.setStorage(BRStorage.KeyUserToken(), userToken);
        BRStorage.setStorage(BRStorage.KeyGameID(), gameId);
        BRStorage.setStorage(BRStorage.KeyChannelCode(), channelCode);
        BRStorage.setStorage(BRStorage.KeyRunRomSystem(), runRomSystem);
        BRStorage.setStorage(BRStorage.KeyBRSDKVersionCode(), this.sdkVersionCode);
      } else {
        this.sdkVersionCode = BRStorage.getStorage(
            BRStorage.KeyBRSDKVersionCode()
        );
      }
      let params = {
        userToken: userToken,
      };
      this.$http(window.config.webHomeApiV2 + "/game_gift/list", params).then(
          (res) => {
            let code = res.code;
            if (code !== 1) {
              this.BRToast(res.msg);
              return;
            }
            this.giftListData = res.data;
          }
      );
    },

    //获取礼包码
    getCard(giftId) {
      let params = {
        giftId: giftId,
      };
      this.$http(window.config.webHomeApiV2 + "/game_gift/get", params).then(
          (res) => {
            let code = res.code;
            if (code !== 1) {
              this.BRToast(res.msg);
              return;
            }
            window.location.reload();
          }
      );
    },

    //复制礼包码
    copyCard(cardNum) {
      BRNative.copyText(cardNum);
    },

    //tab切换
    onChange(e) {
      this.activeName = e;
      this.$router.push(e);
    },
  },
};
</script>

<style lang="less">
@import "../../../assets/css/welfare/index.less";
</style>
